<template>
  <!-- 标签栏 -->
  <div class="tabWrap">
    <!-- <div class="tabAll">全部频道</div> type="card"-->
    <van-tabs v-model="activeName" title-active-color="#dd1a21">
      <!-- v-for="(keyword, index) in tab.keywords" :key="index" -->
      <van-tab title="推荐">
        <van-swipe class="tu" :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" style="height: 100px; width: 390px" />
          </van-swipe-item>
        </van-swipe>
      </van-tab>
      <van-tab title="居家生活" name="b">居家生活</van-tab>
      <van-tab title="宠物生活" name="c">宠物生活</van-tab>
      <van-tab title="服饰鞋包" name="d">服饰鞋包</van-tab>
      <van-tab title="美食酒水" name="e">美食酒水</van-tab>
      <van-tab title="个护清洁" name="f">个护清洁</van-tab>
      <van-tab title="母婴亲子" name="g">母婴亲子</van-tab>
      <van-tab title="母婴亲子" name="h">母婴亲子</van-tab>
      <van-tab title="数码家电" name="i">数码家电</van-tab>
      <van-tab title="严选全球" name="j">严选全球</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";

import { Tab, Tabs } from "vant";
Vue.use(Tab);
Vue.use(Tabs);

import { Swipe, SwipeItem } from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);

import { Lazyload } from "vant";
Vue.use(Lazyload);
export default {
  name: "Tab",
  // 标签
  data() {
    return {
      // tab
      activeName: "a",

      images: ["https://img01.yzcdn.cn/vant/apple-1.jpg", "https://img01.yzcdn.cn/vant/apple-2.jpg"],
    };
  },
};
</script>

<style scoped></style>
